function Popup(){
    this.open = function(id, title, content, cmd){
        if ($('#' + id).length != 0){
            $('#' + id).remove();
        }
        
        $('body:first').append('<div class="main-popup" id="'+id+'">\
                    <div class="popup-wrapper">\
                    <div class="popup-title">'+title+'<a class="popup-close"></a></div>\
                    <div class="popup-content">\
                        '+content+'\
                    </div>\
                    <div class="popup-bar">\
                    </div>\
                </div>\
            </div>');
        $('#' + id + ' .popup-close').click(function(){
            popup.close(id);
        });
        if(cmd)
        for(var i=0; i<cmd.length; i++){
            $('#' + id + ' .popup-bar').append('<a class="button" id="popCmd_'+id+'_'+i+'">'+cmd[i].title+'</a>');
            $('#'+'popCmd_'+id+'_'+i).click(cmd[i].fn);
        }
        
        $('#' + id).draggable({
            handle: $('#' + id + ' .popup-title')
        });
        
        this.resetPos();
        //$('#' + id).show('slide',{direction: 'right'}, 1000);
		$('#' + id).show();
        shadow.show();
        $('#' + id).resize(function(){
            popup.resetPos();
        });
        $(window).resize(function(){
            popup.resetPos();
        });
    }
    
    this.close = function(id){
        //$('#'+id).hide('slide',{direction: 'right'}, 1000, function(){$('#'+id).remove()});
		$('#'+id).hide();
        shadow.hide();
    }
    
    this.resetPos = function(){
        $('.main-popup').each(function(){
            var docWidth = $(window).width();
            var docHeight = $(window).height();
            var popWidth = $(this).width();
            var popHeight = $(this).height();
            $(this).css('top', (docHeight-(popHeight))/2);
            $(this).css('left', (docWidth-(popWidth))/2);
            $(this).find('.popup-content').css('max-height',$(window).height() - 200);
            $(this).find('.popup-content').css('max-width',$(window).width() - 200);
        });
    }
    
    this.msg = function(msg){
        this.open('popup-msg', 'Thông báo', '<div class="folder-content">'+msg+'</div>', [{
            title:"Đồng ý",
            fn:function(){
                popup.close('popup-msg');
            }
        }]);
    }
    
    this.confirm = function(msg, fn){
        this.open('popup-confirm', 'Thông báo', '<div class="folder-content">'+msg+'</div>', [{
            title:"Đồng ý",
            fn:function(){
                fn();
                popup.close('popup-confirm');
            }
        },{
            title:'Từ chối',
            fn:function(){
                popup.close('popup-confirm');
            }
        }]);
    }
}

function Loading(){
    this.show = function(){
        if ($('#loading').length == 0)
            $('body:first').append('<div id="loading" class="loading"><span class="loading-img"></span><span class="loading-text">Vui lòng chờ trong giây lát!</span></div>');
        $('#loading').fadeIn();
        shadow.show();
    }
    this.hide = function(){
        $('#loading').fadeOut();
        shadow.hide();
    }
}

function Shadow(){
    this.show = function(){
        if ($('#shadow').length == 0)
            $('body:first').append('<div id="shadow" class="bg-overlay"></div>');
        $('#shadow').show();
    }
    this.hide = function(){
        $('#shadow').hide();
    }
}

function Text(){
    this.subString = function(length, source){
        if(source.length>length)
            return source.substring(0, length)+'...';
        else
            return source;
    }
}

var shadow = new Shadow();
var loading = new Loading();
var popup = new Popup();
var text = new Text();